import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import styles from "./Topic.module.scss";
// 引入连接器
import { connect } from "react-redux";
// 引入store
import store from "../../store";
// 引入action
// 图片url
import { imgURL } from "../../baseURL/baseURL";
import {
  initTopicAction,
  getTopicAction,
} from "../../store/actions/TopicAction";
class Topic extends Component {
  // 组件挂载
  componentDidMount() {
    let search = this.props.location.search;
    if (search) {
      let id = search.split("=")[1];
      store.dispatch(getTopicAction({ id }));
    }
  }
  // 跳转到商品详情页
  hanlderToDetail = (id) => {
    this.props.history.push("goodsDetail?" + id);
  };
  render() {
    return (
      <div className={styles.shopTopic}>
        <div className={styles.topicDetail}>
          <h3 className={styles.title}>{this.props.message.data.title}</h3>
          <div
            className={styles.topicContent}
            dangerouslySetInnerHTML={{
              __html:
                this.props.message.data.article &&
                this.props.message.data.article.content,
            }}
          ></div>
        </div>
        <div className={styles.goodsRecommend}>
          {this.props.message.data.goodsList &&
            this.props.message.data.goodsList.map((v) => {
              return (
                <div className={styles.goodsItem} key={v.id}>
                  <div
                    className={styles.showImg}
                    onClick={this.hanlderToDetail.bind(this, v.id)}
                  >
                    <img src={imgURL + v.pic} alt="" />
                  </div>
                  <div className={styles.goodsTitle}>{v.name}</div>
                </div>
              );
            })}
        </div>
      </div>
    );
  }
  // 组件销毁生命周期
  componentWillUnmount() {
    // 将store中topic的数据初始化。
    store.dispatch(initTopicAction());
  }
}
// 定义属性
const mapStateToProps = (state) => {
  return {
    message: state.TopicReducer.message,
  };
};

export default withRouter(connect(mapStateToProps, null)(Topic));
